<template>
  <div>
    <div>
      <div class="articleItem-wrapper">
        <!-- 文章图像开始  -->
        <div class="articleImg">
          <img src="/img/huamulan.jpg" />
        </div>
        <!-- 文章图像结束 -->
        <!-- 文章简介开始 -->
        <div class="articleDes">
          <div class="desTitle">
            <span>长经胡水门桥</span>
          </div>
          <div class="desContent">
            <span>评分8.5</span>
          </div>
          <div>
            <span class="actor">主演：吴京，章子怡，徐峥，蔡徐坤</span>
          </div>
          <div>
            <span>2022-08-11中国大陆上映</span>
          </div>
          <van-divider />
          <div></div>
        </div>
        <div class="btn">
          <button @click="buyTicket" v-if="change">购票</button>
          <button @click="buyTicket" v-if="!change">删除</button>
        </div>
        <!-- 文章简介结束 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["change","select"],
  methods: {
    orderItem() {
      console.log("xiangqing");
    },
    buyTicket() {
      // console.log("购票",this.select);
      if(this.change == true){
        console.log("购票",this.select)
      }else{
        console.log("删除",this.select)
      }
    },
    // deleteTicket(){
    //   console.log("删除");
    // }
  },
};
</script>

<style scoped>
.articleItem-wrapper {
  display: flex;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
  margin-left: 15px;
  width: 74px;
  /* border: 1px solid #444; */
  /* border-radius: 5px; */
}
.articleImg img {
  width: 74px;
  height: 112px;
  border: 1px solid rgb(160, 155, 155);
  border-radius: 5px;
}
.articleDes {
  /* display: flex; */
  /* height: 65px; */
  width: 80%;
  font-size: 14px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 1.6rem;
  letter-spacing: normal;
  color: rgb(106, 106, 107);
}
.actor {
  width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  height: 20px;
}
.desTitle {
  font-size: 20px;
  padding-top: 7px;
  color: black;
}
.btn {
  width: 90px;
  /* display: flex;
  align-items: center; */
  /* justify-content: center; */
}
.btn button {
  width: 60px;
  height: 30px;
  margin-top: 2.5rem;
  background-color: rgb(247, 54, 54);
  color: aliceblue;
  /* padding: 5px 5px 5px 5px; */
  border: 1px solid red;
  border-radius: 15px;
  margin-right: 10px;
}
</style>
